<template>
    <div class="search" ref="search">
        <van-sticky>
            <van-search v-model="value" placeholder="请输入搜索关键词"
            @focus="focus"
            @blur="blur"
            autofocus
            show-action
            @input="setText"
            @search="search">
                <template #action>
                    <div @click="search(value)">搜索</div>
                </template>
                <template #left>
                    <div class="tuic" @click="$router.back(-1);$router.isBack = true">
                        <van-icon name="arrow-left" size="18"/>
                    </div>
                </template>
            </van-search>
            <div class="texts">
                <div :key="index" v-for="key,index in keys" @click="search(value = key)">
                    {{key}}
                </div>
            </div>
            <van-tabs v-model="active" @change="change">
                <van-tab :title="item" v-for="(item,index) in tabsList" :key="index"></van-tab>
            </van-tabs>
        </van-sticky>
        <div v-show="isshow" class="lishi">
            <div v-if="oldKey.length > 0">
                <h4>历史记录</h4>
                <div class="qinc" @click="clear">清空记录</div>
                <div class="lishi-list">
                    <span v-for="key,index in oldKey" :key="index" @click="search(value = key)" >{{ key }}</span>
                </div>
            </div>
            <div>
                <h4>热门搜索</h4>
                <div class="lishi-list">
                    <span v-for="key,index in hotKey" :key="index" @click="search(value = key)" >{{ key }}</span>
                </div>
            </div>
        </div>
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        v-if="dataList.length != 0"
        class="list"
        @load="onLoad"
        >
            <bookList :books="dataList" v-if="dataType == 'book'"/>
            <ListDataMp3 :dataList="dataList" v-else-if="dataType == 'song'"/>
            <moviesList :list="dataList" v-else-if="dataType == 'movies'"/>
        </van-list>
        <LoadAnimation :load="Load" title="搜索中..."/>
    </div>
</template>

<script>
import { SearchSend, hotSearchKey } from '@/api/search'
import bookList from '@/components/book/bookList'
import moviesList from '@/components/movies/moviesList.vue'
export default {
    components : { bookList, moviesList },
    data() {
        return {
            dataList : [],
            dataType : 'song',
            isshow : true,
            keys : [],
            hotKey : [],
            oldKey : JSON.parse(localStorage.getItem('oldKey')) || [],
            value : '',
            limit : 20,
            page : 1,
            loading : false,//是否显示加载状态
            finished : false,//是否加载到头了
            Load : false,
            tabsList : ['小说', '音乐', '影视'],
            active : parseInt(this.$route.query.type) || 0,
        }
    },
    created(){
        if(this.$route.query.key){
            this.search(this.value = this.$route.query.key)
        }
        this.hotSearchKey()
    },
    mounted(){
    },
    methods:{
        // 当输入框聚焦时触发
        focus(){
            this.isshow = true
            this.$refs.search.scrollTop = 0
        },
        // 当提交搜索时触发
        search(e){
            if(!e){
                return
            }
            this.isshow = false
            this.Load = true
            this.dataList = []
            SearchSend(e, this.limit, this.page, this.getType()).then(res => {
                if(res.code == 200){

                    this.$route.query.key = e

                    this.oldKey = [...new Set([e,...this.oldKey])]

                    localStorage.setItem('oldKey', JSON.stringify(this.oldKey))

                    this.dataList = res.data.list
                    this.dataType = res.data.type

                    this.$toast.success('找到' + res.data.total + '个')
                    this.finished = false

                    if(this.active == 2){
                        this.finished = true
                    }
                }
                this.Load = false
            })
        },
        // 清空历史记录
        clear(){
            this.oldKey = []
            localStorage.setItem('oldKey', JSON.stringify(this.oldKey))
        },
        // 当输入框失去聚焦时触发
        blur(){
        },
        hotSearchKey(){
            hotSearchKey({
                type : this.getType()
            }).then(res => {
                this.hotKey = res.data
            })
        },
        setText(){


        },
        onLoad(){
            this.page++
            SearchSend(this.value, this.limit, this.page, this.getType()).then(res => {
                if(res.code == 200){
                    this.dataList.push(...res.data.list)
                    this.loading = false
                    if(res.data.list.length < this.limit){
                        this.finished = true
                    }
                }
            })
        },
        getType(){
            if(this.active == 0){
                return 'book'
            }else if(this.active == 1){
                return 'song'
            }else{
                return 'movies'
            }
        },
        change(){
            this.$route.query.type = this.active
            this.page = 1,
            this.loading = false
            this.finished = false
            this.$route.meta.notAudio = this.active == 0
            this.hotSearchKey()
            if(this.isshow){
                return
            }
            this.search(this.value)
            // this.$router.push(`/search?type=${this.active}&key=${this.value}`)
        }
        // 获取歌单
    }
}
</script>

<style scoped>
    .search{
        position: absolute;
        height: calc(100%);
        width: 100%;
        overflow-y: scroll;
    }
    .texts{
        width: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        line-height: 30px;
    }

    .texts > div{
        padding: 0 10px;
    }

    .lishi{
        padding: 10px;
    }
    .lishi h4 {
        margin: 20px 0;
    }
    .lishi-list{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .lishi>div{
        position: relative;
    }
    .qinc{
        position: absolute;
        right: 10px;
        top: 5px;
        color: rgb(39, 126, 97);
    }
    .lishi span {
        position: relative;
        padding: 5px 10px;
        /* padding-right: 30px; */
        border-radius: 10px;
        color: rgba(0, 0, 0, 0.5);
        background: rgba(255, 255, 255, 0.5);
        margin: 5px;
    }
    
    .lishi span::after{
        content: '';
        display: block;
        position: absolute;
        right: 5px;
        top: 5px;
    }

    .list{
        /* padding-top: 8px; */
        padding-bottom: 100px;
    }

    .tuic{
        width: 30px;
    }
</style>